<template>
    <div style="text-align: center;height: 80vh;" v-loading="isLoading">
        <h1>直播属性设置</h1>

        <el-form :model="liveParm" label-width="auto" style="min-width: 600px;margin-left: 30%;" size="large">
            <el-form-item  size="large" label="直播标题：">
                <input :disabled="hasLiveRoom" style="width: 300px;height: 30px;"  maxlength="20"  v-model="liveParm.title" />
            </el-form-item>

            <el-form-item label="直播封面：">
                
            </el-form-item>

            <el-form-item label="直播推流地址：">
                <div v-if="liveParm.appName">
                    {{address.pushUrl}}
                    <el-button @click="copy(address.pushUrl)" style="margin-left: 30px;" size="middle" type="primary" plain>复制</el-button>
                </div>

                <div v-else>请先获取推流码</div>
            </el-form-item>


            <el-form-item label="推流码：">
                <div  v-if="liveParm.appName">
                    <span v-if="showAppName">{{liveParm.appName}}</span>
                    <span v-else>**********************</span>
                    <el-button @click="copy(liveParm.appName)" style="margin-left: 76px;" size="middle" type="primary" plain>复制</el-button>
                    <el-button @click="showAppName=!showAppName"  size="middle" type="danger" plain>{{showAppName?'隐藏':'显示(打死补药告诉其他人)'}}</el-button>
                </div>


                <div v-else>
                    <el-button :disabled="buttonDisabled" type="primary" @click="getAppName()">获取推流码</el-button>
                </div>
            </el-form-item>
        </el-form>

        <div style="margin-top: 30px;">
            <h2>温馨提示</h2>
            <p>在结束直播后请点击关闭直播按钮</p>
            <p>超时未推流将自动关闭推流，请重新下播之后再开播</p>
        </div>

        <div v-if="hasLiveRoom" style="margin-top: 1%;">
            <el-button link type="primary" @click="open()">打开我的直播间</el-button>
        </div>

        <div style="margin-top: 1%;">

            <el-button :disabled=" buttonDisabled" class="button" @click="createLive()" type="success" v-if="!hasLiveRoom">开启直播</el-button>
            <el-button :disabled=" buttonDisabled" class="button" @click="closeLive()" type="danger" v-else>关闭直播</el-button>
        </div>
    </div>

</template>

<script setup lang="ts">
    import {ref,onMounted} from "vue";
    import LiveParm from "@/types/live/LiveParm";
    import request from "@/base/request";
    import { ElMessage } from "element-plus";
    import { address } from "@/base/address";
    import { useRouter } from 'vue-router';
    import UserInfo from "@/types/user/UserInfo";
    import getUserInfo from "@/utils/getUserInfo";
    import useClipboard from "vue-clipboard3";

    const router = useRouter();
    const isLoading= ref(false)
    const showAppName= ref(false)
    const liveParm = ref<LiveParm>({})
    const buttonDisabled= ref(false)
    const hasLiveRoom= ref(false)
    const userInfo=ref<UserInfo>()
    const { toClipboard } = useClipboard();
    const open=()=>{
        window.open(`/liveing/${userInfo.value.id}`)
    }

    const copy= async (data) =>{
        try{
            await toClipboard(data)
            ElMessage.success("复制成功")
        }catch(e){
            ElMessage.error("复制失败")
        }
    }
    const getAppName=async()=>{
        buttonDisabled.value=true
        try{
            const response=(await (request.get('/video/live/getAppName'))).data
            if(response.code==200){
                liveParm.value.appName=response.data
            }else{
                ElMessage.error(response.msg)
            }
        }finally{
            buttonDisabled.value=false
        }

    }

    const getLiveParm=async()=>{
        const response=(await request.get('/video/live/getLive')).data
        if(response.code==200){
            liveParm.value=response.data
            hasLiveRoom.value=true
        }else if(response.code!==404){
            ElMessage.error(response.msg)
        }
    }

    const createLive=async()=>{
        if(liveParm.value.title==null||liveParm.value.title==""){
            ElMessage.error("直播标题不能为空")
            return;
        }

        buttonDisabled.value=true
        try{
            const response=(await request.post('/video/live/createLive',liveParm.value)).data
            if(response.code==200){
                ElMessage.success("开播成功")
                liveParm.value.channelKey=response.data
                hasLiveRoom.value=true
            }else{
                ElMessage.error(response.msg)
            }
        }finally{
            buttonDisabled.value=false
        }

    }

    const closeLive=async()=>{
        buttonDisabled.value=true
        try{
            const response=(await request.delete('/video/live/stopLive')).data
            if(response.code==200){
                ElMessage.success("关闭成功")
                window.location.reload()
            }else{
                ElMessage.error(response.msg)
            }
        }finally{
            buttonDisabled.value=false;
        }

    }


    onMounted(async ()=>{
        isLoading.value=true
        let reload=0;
        while(isLoading.value && reload<3){
            try{
                await getLiveParm()
                userInfo.value= await getUserInfo(null)
                isLoading.value=false
            }catch(e){
                console.log(e)
            }
        }
    })
</script>

<style scoped>
    .button{
        width: 150px;
        height: 50px;
    }
</style>